<template>
  <el-dialog title="在途申请信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" label="申请日期" width="150"></el-table-column>
      <el-table-column prop="applicationNumber" label="申请编号" width="200"></el-table-column>
      <el-table-column prop="applicant" label="申请人"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog">取消</el-button>
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'ApplicationDialog',
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          date: '2023-05-01',
          applicationNumber: 'APP20230501001',
          applicant: '张三',
          status: '审核中'
        },
        {
          date: '2023-05-02',
          applicationNumber: 'APP20230502002',
          applicant: '李四',
          status: '待处理'
        },
        {
          date: '2023-05-03',
          applicationNumber: 'APP20230503003',
          applicant: '王五',
          status: '已完成'
        }
      ]
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm('确认关闭对话框吗？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    cancelDialog() {
      this.dialogVisible = false;
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>